import React,{ Suspense } from 'react';
import { Layout ,Tabs} from 'antd';
import { Route, Switch } from 'react-router-dom';

import SeoContainer from '&components/seo-container';
import Header from '&widgets/header';
import Sider from '&widgets/sider';

import PhotoAlbum from '../subPages/photo-album'
import AlertList from '../subPages/alertList';
import Setting from '../subPages/setting'
import HotMaps from '../home/admin/hotmaps'

import styles from './styles.module.scss';
const { Content } = Layout;
const { TabPane } = Tabs;
export default () => {
    return (
        <SeoContainer title="用户界面">
            <Layout>
                <Sider/>
                <Layout>
                    <Header/>
                    <Content>
                        <div className={ styles.interviewArticle }>
                            {/* <Suspense fallback={<div>loading</div>}> */}
                                <Switch>
                                    {/* <Route path="/user/HotMap"  render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"热点图"}>
                                                {React.createElement(HotMaps)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/> */}
                                    {/* <Route path="/user/photo-album" render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"临时图库"}>
                                                {React.createElement(PhotoAlbum)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/> */}
                                    <Route path="/user/alert-list"  render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"报警列表"}>
                                                {React.createElement(AlertList)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/>
                                    <Route path="/user/setting"  render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"个人设置"}>
                                                {React.createElement(Setting)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/>
                                    {/* <Route path="/admin/create-hotmaps" component={CreateHotMaps}/>
                                        <Route path="/admin/member-list" component={MemberList}/>
                                        <Route path="/admin/hotmaps" component={AdminHotMap}/>
                                        <Route path="/admin/organization-list" component={OrganizationList}/>
                                        <Route path="/admin/setting" component={AdminSetting}/>
                                        <Route path="/common/alert-list" component={AlertList}/>
                                        <Route path="/user/hotmaps" component={UserHotMaps}/>
                                        <Route path="/user/photo-album" component={PhotoAlbum}/> */}
                                </Switch>
                            {/* </Suspense> */}
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </SeoContainer>
    );
}